<template>
    <div class="platform">
        <my-tag title="机构管理" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="organizationRef" :model="form" :rules="rules" label-position="top" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="机构名称" prop="organizationName">
                        <el-input v-model="form.organizationName" @focus="organizationNameLimit = true"
                            @blur="organizationNameLimit = false" :show-word-limit="organizationNameLimit"
                            placeholder="请输入机构名称" maxlength="20" />
                    </el-form-item>
                    <el-form-item label="授权手机号" prop="contactInformation">
                        <!-- :disabled="form.organizationId != undefined" -->
                        <el-input v-model="form.contactInformation" placeholder="请输入机构授权手机号" />
                    </el-form-item>
                    <el-form-item label="联系电话" prop="phonenumber">
                        <!-- :disabled="form.organizationId != undefined" -->
                        <el-input v-model="form.phonenumber" placeholder="请输入机构联系电话" />
                    </el-form-item>
                    <el-form-item label="机构地址" prop="address">
                        <el-input type="textarea" v-model="form.address" placeholder="请输入机构地址"
                            @focus="addressLimit = true" @blur="addressLimit = false" :show-word-limit="addressLimit"
                            maxlength="50" />
                    </el-form-item>
                    <el-form-item label="机构简介" prop="organizationDesc">
                        <el-input type="textarea" :autosize="{ minRows: 5 }" v-model="form.organizationDesc"
                            placeholder="请输入机构简介" @focus="introduceLimit = true" @blur="introduceLimit = false"
                            :show-word-limit="introduceLimit" maxlength="500" />
                    </el-form-item>
                    <el-form-item label="成立时间" prop="foundingYears">
                        <el-date-picker style="width:100%;" v-model="form.foundingYears" type="date" size="default"
                            value-format="YYYY-MM-DD" placeholder="请选择成立时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="排序：" prop="sort1">
                        <el-input-number controls-position="right" size="large" style="width:100%;" v-model="form.sort1"
                            :step="1" :min="1" :max="9999" />
                    </el-form-item>
                </div>
                <div class="form-right">
                    <el-form-item label="机构logo" prop="avatar">
                        <image-upload v-model="form.avatar" :limit="1"></image-upload>
                    </el-form-item>

                    <el-form-item label="机构形象照" prop="profilePicture">
                        <image-upload v-model="form.profilePicture" :limit="1"></image-upload>
                    </el-form-item>
                    <el-form-item label="名片背景" prop="hairstyle">
                        <image-upload v-model="form.hairstyle" :limit="1" />
                    </el-form-item>
                    <el-form-item label="营业执照" prop="businessLicense">
                        <image-upload v-model="form.businessLicense" :limit="2"></image-upload>
                    </el-form-item>
                    <el-form-item label="机构荣誉" prop="honors">
                        <image-upload v-model="form.honors" :limit="3"></image-upload>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getOrganization, addOrganization, updateOrganization } from "@/api/decor/designAgency";
const router = useRouter();
const route = useRoute();
const introduceLimit = ref(false)
const organizationNameLimit = ref(false)
const addressLimit = ref(false)
const { proxy } = getCurrentInstance();
const data = reactive({
    form: {},
    rules: {
        organizationName: [{ required: true, message: "机构名称不能为空", trigger: "blur" }],
        address: [{ required: true, message: "机构地址不能为空", trigger: "blur" }],
        businessLicense: [{ required: true, message: "请上传营业执照", trigger: "blur" }],
        profilePicture: [{ required: true, message: "请上传机构形象照", trigger: "blur" }],
        avatar: [{ required: true, message: "请上传机构logo", trigger: "blur" }],
        contactInformation: [
            { required: true, message: "授权手机号不能为空", trigger: "blur" },
            {
                pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
                message: "请输入正确的授权手机号",
                trigger: "change",
            }],
        phonenumber: [
            { required: true, message: "联系电话不能为空", trigger: "blur" },
            {
                pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
                message: "请输入正确的联系电话",
                trigger: "change",
            }
        ],
        organizationStatus: [
            { required: true, message: "机构状态不能为空", trigger: "blur" }
        ],
    }
});
const { form, rules } = toRefs(data);
(() => {
    const organizationId = route.params.organizationId
    if (organizationId) {
        getOrganization(organizationId).then(response => {
            form.value = response.data;
            open.value = true;
        });
    }

})()

// 提交按钮
const submitForm = () => {
    proxy.$refs["organizationRef"].validate(valid => {
        if (valid) {
            if (form.value.organizationId != null) {
                updateOrganization(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    router.go(-1)
                });
            } else {
                form.value.organizationStatus = 1
                addOrganization(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    router.go(-1)
                });
            }
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回按钮
const goBack = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: center;

    .header-warn {
        font-family: NotoSansHans, NotoSansHans;
        font-weight: 400;
        font-size: 14px;
        color: #ACB3BD;
        line-height: 21px;
        text-align: right;
        font-style: normal;
        margin-left: 20px;
    }
}
</style>